<template>
  <div class="app-container">
    <!--查询-->
    <el-form :inline="true" :model="query" class="demo-form-inline">
      <el-form-item label="开始时间">
        <el-date-picker
          v-model="query.begin"
          type="date"
          value-format="timestamp"
          placeholder="时间点">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="query.end"
          type="date"
          value-format="timestamp"
          placeholder="时间点">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status" style="margin-left: 10px;width: 80%" clearable placeholder="可搜索">
          <el-option
            v-for="status in applyStatusEnum"
            :key="status.value"
            :label="status.label"
            :value="status.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="补签" name="ComplementSign">
        <el-table :data="complementSignList" style="width: 100%;margin-top:30px;" border>
          <el-table-column width="130" align="center" prop="name" label="名字">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="name" label="审批人">
            <template slot-scope="scope">
              {{ scope.row.reviewer }}
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="signDate" label="开始时间">
            <template slot-scope="scope">
              <el-date-picker readonly v-model="scope.row.begin" type="datetime" placeholder="开始时间"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="signDate" label="结束时间">
            <template slot-scope="scope">
              <el-date-picker readonly v-model="scope.row.end" type="datetime" placeholder="结束时间"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="type" label="补签类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" disabled style="margin-left: 10px;width: 80%" placeholder="补签类型">
                <el-option
                  v-for="status in complementSignTypeEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="duration" label="时长">
            <template slot-scope="scope">
              {{ scope.row.duration }} (小时)
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="duration" label="凭证">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.fileUrl">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="type" label="申请状态">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" disabled style="margin-left: 10px;width: 80%" placeholder="申请状态">
                <el-option
                  v-for="status in applyStatusEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="check(scope)" fixed="right" :disabled="scope.row.status !== 'APPLYING'">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="请假" name="Leave">
        <el-table :data="leaveList" style="width: 100%;margin-top:30px;" border>
          <el-table-column align="center" prop="name" label="名字" width="120px">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="name" label="审批人" width="120px">
            <template slot-scope="scope">
              {{ scope.row.reviewer }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="signDate" label="开始时间" width="120px">
            <template slot-scope="scope">
              <el-date-picker readonly v-model="scope.row.begin" type="datetime" placeholder="开始时间"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="signDate" label="结束时间" width="120px">
            <template slot-scope="scope">
              <el-date-picker readonly v-model="scope.row.end" type="datetime" placeholder="结束时间"></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="duration" label="时长" width="120px">
            <template slot-scope="scope">
              {{ scope.row.duration }} (小时)
            </template>
          </el-table-column>
          <el-table-column align="center" prop="reason" label="原因" width="120px">
            <template slot-scope="scope">
              {{ scope.row.reason }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="type" label="申请状态" width="120px">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" disabled style="margin-left: 10px;width: 80%" placeholder="申请状态">
                <el-option
                  v-for="status in applyStatusEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="check(scope)" :disabled="scope.row.status !== 'APPLYING'">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getList"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="加班" name="Overtime">
        <el-table :data="overtimeList" style="width: 100%;margin-top:30px;" border>
          <el-table-column width="130" align="center" prop="name" label="名字">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="name" label="审批人">
            <template slot-scope="scope">
              {{ scope.row.reviewer }}
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" label="加班时间">
            <el-table-column width="130" align="center" prop="signDate" label="开始时间">
              <template slot-scope="scope">
                <el-date-picker readonly v-model="scope.row.begin" type="datetime" placeholder="开始时间"></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column width="130" align="center" prop="signDate" label="结束时间">
              <template slot-scope="scope">
                <el-date-picker readonly v-model="scope.row.end" type="datetime" placeholder="结束时间"></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column width="130" align="center" prop="duration" label="时长">
              <template slot-scope="scope">
                {{ scope.row.duration }} (小时)
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column width="130" align="center" label="真实打卡时间">
            <el-table-column width="130" align="center" prop="signDate" label="开始时间">
              <template slot-scope="scope">
                <el-date-picker readonly v-model="scope.row.trueBegin" type="datetime" placeholder="开始时间"></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column width="130" align="center" prop="signDate" label="结束时间">
              <template slot-scope="scope">
                <el-date-picker readonly v-model="scope.row.trueEnd" type="datetime" placeholder="结束时间"></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column width="130" align="center" prop="duration" label="时长">
              <template slot-scope="scope">
                {{ scope.row.trueDuration }} (小时)
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column width="130" align="center" prop="reason" label="原因">
            <template slot-scope="scope">
              {{ scope.row.reason }}
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="type" label="加班类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" disabled style="margin-left: 10px;width: 80%" placeholder="加班类型">
                <el-option
                  v-for="status in workOvertimeTypeEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="type" label="补偿类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.compensateType" disabled style="margin-left: 10px;width: 80%" placeholder="补偿类型">
                <el-option
                  v-for="status in workCompensateTypeEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" prop="type" label="申请状态">
            <template slot-scope="scope">
              <el-select v-model="scope.row.status" disabled style="margin-left: 10px;width: 80%" placeholder="申请状态">
                <el-option
                  v-for="status in applyStatusEnum"
                  :key="status.value"
                  :label="status.label"
                  :value="status.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column width="130" align="center" label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="check(scope)" :disabled="scope.row.status !== 'APPLYING'">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getList"
          />
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :visible.sync="dialogVisible" title="审核">
      <el-form :model="checkApply" label-width="80px" label-position="left">
        <el-form-item label="审核结果">
          <el-select v-model="checkApply.status" style="width: 80%" placeholder="请选择">
            <el-option
              v-for="status in applyStatusEnum"
              :key="status.value"
              :label="status.label"
              :value="status.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { check, getCheckComplement, getCheckLeave, getCheckOvertime } from '@/api/check'

export default {
  name: 'Check',
  components: {},
  data() {
    return {
      complementSignList: [],
      leaveList: [],
      overtimeList: [],
      checkApply: {},
      dialogVisible: false,
      query: {
        status: 'APPLYING'
      },
      applyStatusEnum: [
        {value: 'APPLYING', label: "审核中"},
        {value: 'PASS', label: "通过"},
        {value: 'REVOKE', label: "撤销"},
        {value: 'FAIL', label: "拒绝"}
      ],
      complementSignTypeEnum: [
        {value: 'LATE', label: "迟到补签"},
        {value: 'ALL', label: "全天补签"},
        {value: 'OTHER', label: "其他"},
      ],
      leaveTypeEnum: [
        {value: 'LEAVE', label: "无薪事假"},
        {value: 'REVOKE', label: "撤销"},
        {value: 'OTHER', label: "其他"},
      ],
      workOvertimeTypeEnum: [
        {value: 'PAID', label: "有偿"},
        {value: 'FREE', label: "无偿"},
        {value: 'OTHER', label: "其他"},
      ],
      workCompensateTypeEnum: [
        {value: 'PAID_HOLIDAY', label: "带薪假期"},
        {value: 'FREE_HOLIDAY', label: "无薪假期"},
        {value: 'OTHER', label: "其他"},
      ],
      total: 100,
      page: 1,
      limit: 20,
      activeName: 'ComplementSign'
    };
  },
  //方法集合
  methods: {
    async getList(page = 1) {
      const offset = this.limit * (page - 1)
      if ('ComplementSign'===this.activeName) {
        const res = await getCheckComplement(this.query, offset, this.limit)
        this.complementSignList = res.data.rows
        this.total = res.data.total
      } else if ('Leave'===this.activeName) {
        const res = await getCheckLeave(this.query, offset, this.limit)
        this.leaveList = res.data.rows
        this.total = res.data.total
      } else {
        const res = await getCheckOvertime(this.query, offset, this.limit)
        this.overtimeList = res.data.rows
        this.total = res.data.total
      }
    },
    onSubmit() {
      this.getList()
    },
    async check({$index, row}) {
      this.checkApply = {}
      this.dialogVisible = true
      this.checkApply.bizId = row.id
    },
    handleClick(tab, event) {
      this.getList()
    },
    async confirm() {
      if ('ComplementSign'===this.activeName) {
        this.checkApply.type = 'COMPLEMENT_SIGN'
        await check(this.checkApply)
      } else if ('Leave'===this.activeName) {
        this.checkApply.type = 'LEAVE'
        await check(this.checkApply)
      } else {
        this.checkApply.type = 'WORK_OVERTIME'
        await check(this.checkApply)
      }
      this.dialogVisible = false
      await this.getList()
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList()
  }
}

</script>

<style scoped>
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
